<template>
    <div id="request">


        <section class="requestData">
            <div class="requestType">
                <span class="lable">
                    请求方式:
                </span>
                <input type="radio" id="get" v-model="requestType" value="get">
                <label for="get">get</label>
                <input type="radio" id="post" v-model="requestType" value="post">
                <label for="post">post</label>
                <input type="radio" id="delete" v-model="requestType" value="delete">
                <label for="delete">delete</label>
            </div>
            <div class="requestBaseUrl">
                <label for="requestBaseUrl">服务器地址:</label>
                <input type="text" id="requestBaseUrl" v-model="requestBaseUrl">
            </div>
            <div class="requestDetailUrl">
                <label for="requestBaseUrl">接口路径:</label>
                <input type="text" id="requestDetailUrl" v-model="requestDetailUrl">
            </div>
            <div class="requestInputData">
                <span>
                    请求参数:
                </span>
                <codemirror ref="myCm" :value="requestInputData" :options="cmOptions" @input="onCmCodeChange">
                </codemirror>
            </div>
        </section>
        <button @click="submit()">提交</button>
        <section>
            <textarea rows="10" v-model="responseData" readonly></textarea>
        </section>

    </div>
</template>
<script>
    // require component
    import {
        codemirror
    } from "vue-codemirror";

    import {
        request
    } from '../assets/js/reuqest';

    // require styles
    import "codemirror/lib/codemirror.css";

    import "codemirror/mode/javascript/javascript.js";
    // theme css
    import "codemirror/theme/base16-dark.css";

    export default {
        name: "part10",
        components: {
            codemirror
        },
        data() {
            return {
                requestType: "",
                requestInputData: "",
                requestBaseUrl: "",
                requestDetailUrl: "",
                cmOptions: {
                    // codemirror options
                    lineWrapping: true,
                    tabSize: 4,
                    mode: "josn",
                    lineNumbers: true,
                    line: true
                },
                responseData:"",
            };
        },
        methods: {
            onCmCodeChange(newCode) {
                console.log("this is new code", newCode);
                this.requestInputData = newCode;
            },
            submit() {
                console.log(this.code);

                request(this.requestType, this.requestBaseUrl+this.requestDetailUrl, {}).then(res => {
                    console.log(res);
                    this.responseData = JSON.stringify(res.data);

                })
            }
        },

        computed: {
            codemirror() {
                return this.$refs.myCm.codemirror;
            }
        },
    };
</script>
<style scoped>
textarea{
    width: 100%;
}
</style>